<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>每日天气实况</title>
    <style>
        a,a:hover{text-decoration:none}address,blockquote,body,button,code,dd,div,dl,dt,em,fieldset,form,h1,h2,h3,h4,h5,h6,img,input,label,li,ol,p,pre,strong,table,td,textarea,th,ul{margin:0;padding:0}body{font-size:12px;width:100%;height:100%;line-height:200%;font-family:微软雅黑;color:#333}li{list-style-type:none}li a:hover{color:#e76b20}a{color:#000}a:hover{color:#163ca2}img{border:0}h2{font-size:14px}.clear{line-height:0;clear:both;font-size:0}
        .flex-column,.flex-row{-webkit-box-direction:normal}.clearfix::after{display:block;clear:both;content:""}.d-none{display:none}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-block{display:block}.d-flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flex-row{-webkit-box-orient:horizontal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.flex-column{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.flex-row-reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.flex-column-reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.flex-wrap{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-nowrap{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.flex-wrap-reverse{-webkit-flex-wrap:wrap-reverse;-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}.flex-fill{-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.flex-grow-0{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0}.flex-grow-1{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.flex-shrink-0{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}.flex-shrink-1{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1}.justify-content-start{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}.justify-content-end{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}.justify-content-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.justify-content-between{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.justify-content-around{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.align-items-start{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.align-items-end{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.align-items-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.align-items-baseline{-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline}.align-items-stretch{-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}.align-content-start{-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start}.align-content-end{-webkit-align-content:flex-end;-ms-flex-line-pack:end;align-content:flex-end}.align-content-center{-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center}.align-content-between{-webkit-align-content:space-between;-ms-flex-line-pack:justify;align-content:space-between}.align-content-around{-webkit-align-content:space-around;-ms-flex-line-pack:distribute;align-content:space-around}.align-content-stretch{-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch}.align-self-auto{-webkit-align-self:auto;-ms-flex-item-align:auto;align-self:auto}.align-self-start{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}.align-self-end{-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end}.align-self-center{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.align-self-baseline{-webkit-align-self:baseline;-ms-flex-item-align:baseline;align-self:baseline}.align-self-stretch{-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch}.float-left{float:left}.float-right{float:right}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.m-1{margin:.375rem}.mt-1,.my-1{margin-top:.375rem}.mr-1,.mx-1{margin-right:.375rem}.mb-1,.my-1{margin-bottom:.375rem}.ml-1,.mx-1{margin-left:.375rem}.m-2{margin:.75rem}.mt-2,.my-2{margin-top:.75rem}.mr-2,.mx-2{margin-right:.75rem}.mb-2,.my-2{margin-bottom:.75rem}.ml-2,.mx-2{margin-left:.75rem}.m-3{margin:1.5rem}.mt-3,.my-3{margin-top:1.5rem}.mr-3,.mx-3{margin-right:1.5rem}.mb-3,.my-3{margin-bottom:1.5rem}.ml-3,.mx-3{margin-left:1.5rem}.m-4{margin:2.25rem}.mt-4,.my-4{margin-top:2.25rem}.mr-4,.mx-4{margin-right:2.25rem}.mb-4,.my-4{margin-bottom:2.25rem}.ml-4,.mx-4{margin-left:2.25rem}.m-5{margin:4.5rem}.mt-5,.my-5{margin-top:4.5rem}.mr-5,.mx-5{margin-right:4.5rem}.mb-5,.my-5{margin-bottom:4.5rem}.ml-5,.mx-5{margin-left:4.5rem}.pt-0,.py-0{padding-top:0}.pr-0,.px-0{padding-right:0}.pb-0,.py-0{padding-bottom:0}.pl-0,.px-0{padding-left:0}.p-1{padding:.375rem}.pt-1,.py-1{padding-top:.375rem}.pr-1,.px-1{padding-right:.375rem}.pb-1,.py-1{padding-bottom:.375rem}.pl-1,.px-1{padding-left:.375rem}.p-2{padding:.75rem}.pt-2,.py-2{padding-top:.75rem}.pr-2,.px-2{padding-right:.75rem}.pb-2,.py-2{padding-bottom:.75rem}.pl-2,.px-2{padding-left:.75rem}.p-3{padding:1.5rem}.pt-3,.py-3{padding-top:1.5rem}.pr-3,.px-3{padding-right:1.5rem}.pb-3,.py-3{padding-bottom:1.5rem}.pl-3,.px-3{padding-left:1.5rem}.p-4{padding:2.25rem}.pt-4,.py-4{padding-top:2.25rem}.pr-4,.px-4{padding-right:2.25rem}.pb-4,.py-4{padding-bottom:2.25rem}.pl-4,.px-4{padding-left:2.25rem}.p-5{padding:4.5rem}.pt-5,.py-5{padding-top:4.5rem}.pr-5,.px-5{padding-right:4.5rem}.pb-5,.py-5{padding-bottom:4.5rem}.pl-5,.px-5{padding-left:4.5rem}.m-n1{margin:-.375rem}.mt-n1,.my-n1{margin-top:-.375rem}.mr-n1,.mx-n1{margin-right:-.375rem}.mb-n1,.my-n1{margin-bottom:-.375rem}.ml-n1,.mx-n1{margin-left:-.375rem}.m-n2{margin:-.75rem}.mt-n2,.my-n2{margin-top:-.75rem}.mr-n2,.mx-n2{margin-right:-.75rem}.mb-n2,.my-n2{margin-bottom:-.75rem}.ml-n2,.mx-n2{margin-left:-.75rem}.m-n3{margin:-1.5rem}.mt-n3,.my-n3{margin-top:-1.5rem}.mr-n3,.mx-n3{margin-right:-1.5rem}.mb-n3,.my-n3{margin-bottom:-1.5rem}.ml-n3,.mx-n3{margin-left:-1.5rem}.m-n4{margin:-2.25rem}.mt-n4,.my-n4{margin-top:-2.25rem}.mr-n4,.mx-n4{margin-right:-2.25rem}.mb-n4,.my-n4{margin-bottom:-2.25rem}.ml-n4,.mx-n4{margin-left:-2.25rem}.m-n5{margin:-4.5rem}.mt-n5,.my-n5{margin-top:-4.5rem}.mr-n5,.mx-n5{margin-right:-4.5rem}.mb-n5,.my-n5{margin-bottom:-4.5rem}.ml-n5,.mx-n5{margin-left:-4.5rem}.m-auto{margin:auto}.mt-auto,.my-auto{margin-top:auto}.mr-auto,.mx-auto{margin-right:auto}.mb-auto,.my-auto{margin-bottom:auto}.ml-auto,.mx-auto{margin-left:auto}.font-13{font-size:13px}.font-14{font-size:14px}.font-15{font-size:15px}.font-16{font-size:16px}.font-18{font-size:18px}.c-pointer{cursor:pointer}
        .maptop1,.maptops{height:33px;color:#FFF;padding-left:10px;line-height:33px}.maptops{background:url(https://www.qixiangwang.cn/skins/Blue2012/images/index_13.jpg) no-repeat;font-size:14px}.maptop1{margin-left:-1px;margin-top:10px;background:url(https://www.qixiangwang.cn/skins/Blue2012/images/top_03.jpg) no-repeat;font-size:14px}.days3 ul li,.idxbox .idx_name{line-height:22px;font-size:14px}.sm span{color:#ff7e00}.today .left{width:68%}.today .left .tempNum{font-size:40px;font-weight:600;color:#043567}.today .left b{font-size:16px}.today .right{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.air p{font-size:14px}.days3 ul{overflow:hidden}.days3 ul li{float:left;width:33%;text-align:center;margin-top:20px;margin-bottom:20px}.days3 ul .tqboder{border-left:1px solid #fca9a9}.idxbox{-webkit-box-sizing:border-box;box-sizing:border-box;float:left;width:50%;padding:10px 10px 0}.idxbox .idx_icon{background:url(https://www.qixiangwang.cn/skins/Blue2012/images/idx_sprite.png);width:60px;height:55px;float:right}.idxbox .idx_icon.uv{background-position:0 -900px}.idxbox .idx_icon.xc{background-position:0 -1650px}.idxbox .idx_icon.tr{background-position:0 -75px}.idxbox .idx_icon.co{background-position:0 -450px}.idxbox .idx_icon.ct{background-position:0 0}.idxbox .idx_icon.yd{background-position:0 -300px}.idxbox .idx_icon.gm{background-position:0 -600px}.idxbox .idx_name{color:#08c;font-weight:400}.idxbox .idx_value{color:#333;padding:5px 0;font-size:16px;font-weight:400;line-height:24px}img{max-width:100%}.ss-v-hd h3{position:relative;padding-left:15px;height:52px;line-height:52px;border-bottom:solid 1px #eee;font-size:22px;color:#000}.ss-v-hd h3:before{position:absolute;content:"";width:5px;height:22px;left:0;top:50%;margin-top:-11px;background:#fb8b48}.ss-v-hd .image-list-tag{overflow:hidden;font-size:14px;color:#FFF;border-bottom:solid 1px #eee}.ss-v-hd .image-list-tag li{float:left;margin:.375rem 0;width:50%}.ss-v-hd .image-list-tag li a{display:block;position:relative}.ss-v-hd .image-list-tag li a i{position:absolute;left:0;top:0;line-height:19px;padding:0 10px;color:#FFF}.ss-v-hd .image-list-tag li a .red{background:#d03258}.ss-v-hd .image-list-tag li a .blue{background:#488ed4}.ss-v-hd .image-list-tag li a .pink{background:#fc79a4}.ss-v-hd .image-list-tag li a .green{background:#71b365}.ss-v-hd .image-list-tag li a .orange{background:#fb8b48}.ss-v-hd .image-list-tag li a h4{position:absolute;left:0;bottom:0;height:20px;line-height:20px;text-indent:4px;background:rgba(0,0,0,.6);color:#FFF}.ss-v-hd .image-list-tag li a img{display:block}.top-title{font-size:20px;font-weight:700;margin:.3rem;line-height:150%;color:#000}.top-content{margin:0 .3rem .4rem;overflow:hidden;line-height:200%;font-size:14px}.top-content p{word-break:break-all;margin-top:.36rem}
    </style>
</head>
<body>
<div class="maptops">{{.Pm25.CityName}}天气实况</div>
<div class="sm pl-1 pr-1">
    <b>{{.Pm25.CityName}}</b>
    <span>发布日期：{{.CityLive.Update}}</span>
</div>
<div class="pl-1 pr-1">
    <b>{{.CityLive.Today}}</b>
    {{.CityLive.Date}}
    {{.CityLive.Week}}
</div>
<div class="p-1">
    <p>{{.Pm25.Health}}</p>
    <p>{{.Pm25.Advice}}</p>
</div>
<div class="today d-flex align-items-center pl-1 pr-1">
    <div class="left">
        <p class="mb-2" style="font-size: 40px;font-weight: bold;color: #043567;">{{.CityLive.Temperature}}</p>
        <b>{{.CityLive.Situation}}</b>
        <span class="ml-1">{{.Pm25.AirQuality}}</span>
    </div>
    <div class="right">
        {{if ne .CityLive.AdviceImg ""}}
            <img src="https://www.qixiangwang.cn{{.CityLive.AdviceImg}}"/>
        {{end}}
    </div>
</div>
<div class="air pl-1 pr-1">
    <div class="d-flex justify-content-between">
        <p>{{.CityLive.BodyTemperature}}</p>
        <p>{{.CityLive.Wet}}</p>
        <p>{{.CityLive.Press}}</p>
    </div>
    <div class="d-flex justify-content-between">
        <p>{{.CityLive.Visibility}}</p>
        <p>{{.CityLive.Rainfall}}</p>
        <p>&ensp;</p>
    </div>
    <p>{{.CityLive.Wind}}</p>
</div>
{{if ne .CityLive.Days3 ""}}
<div class="maptop1">{{.CityLive.SubTitle}}</div>
<div class="days3">
    {{.CityLive.Days3 | unescaped}}
</div>
{{end}}
{{if ne .CityLive.Exponent ""}}
<div class="maptops">{{.Pm25.CityName}}生活指数</div>
<div class="overflow-hidden">
    {{.CityLive.Exponent | unescaped}}
</div>
{{end}}
{{if ne .Knowledge.ImageList ""}}
<div class="ss-v-hd">
    <h3>搞笑萌图</h3>
    <ul class="image-list-tag">{{.Knowledge.ImageList | unescaped}}</ul>
</div>
{{end}}
{{if and (ne .Knowledge.Title "") (ne .Knowledge.Content "")}}
<section class="ss-news mt-2">
    <h1 class="m-1">{{.Knowledge.Title}}</h1>
    <div class="top-content">
        {{.Knowledge.Content | unescaped}}
    </div>
</section>
{{end}}
<script>
    var domList = document.querySelectorAll('ul.idxbox')
    for (var i = 0; i < domList.length; i++) {
        domList[i].classList.add('mb-2')
    }
</script>
</body>
</html>